<template>
  <div>
    <!-- 表单数据 -->
    <div class="form-box">
      <el-form ref="formData" :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="任务编号:">
          <el-input v-model="formData.user" placeholder="请输入任务编号" />
        </el-form-item>
        <el-form-item label="任务分配状态:">
          <el-select v-model="formData.status" placeholder="请选择">
            <el-option label="已分配" value="1" />
            <el-option label="带人工分配" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="满载状态:">
          <el-select v-model="formData.loadingStatus" placeholder="请选择">
            <el-option label="满载" value="3" />
            <el-option label="空载" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码:">
          <el-input v-model="formData.user" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="起始地机构:">
          <el-select v-model="formData.startAgency.name" placeholder="请输入起始地机构">
            <template>
              <el-tree
                ref="tree"
                node-key="name"
                :expand-on-click-node="false"
                :data="defas"
                :props="defaultProps"
                highlight-current
                check-strictly
                @node-click="handleNodeClick"
              />
            </template>
            <el-option value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="目的地机构:">
          <el-select v-model="formData.endAgency.name" placeholder="请输入目的地机构">
            <template>
              <el-tree
                ref="tree"
                node-key="name"
                :expand-on-click-node="false"
                :data="defas"
                :props="defaultProps"
                highlight-current
                check-strictly
                @node-click="handleNodeClick"
              />
            </template>
            <el-option value="" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表单结束 -->
    <!-- 表格数据 -->
    <div class="form-table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="id" label="运输任务编号" width="180" />
        <el-table-column prop="transportOrder.id" label="运单编号" width="140" />
        <el-table-column prop="createTime" label="下单时间" width="160" />
        <el-table-column label="订单状态" width="80">
          <template slot-scope="{row}">
            <span v-if="row.status === 23000">待取件</span>
            <span v-else-if="row.status === 23001">以取件</span>
            <span v-else-if="row.status === 23002">网点自寄</span>
            <span v-else-if="row.status === 23003">网点入库</span>
            <span v-else-if="row.status === 23004">待装车</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" width="80" />
        <el-table-column prop="senderPhone" label="发件人电话" width="140" />
        <el-table-column label="发件人地址" width="140">
          <template v-slot="{row}">
            <span>{{ row.senderProvince.name }}</span>
            <span>{{ row.senderCity.name }}</span>
            <span>{{ row.senderCounty.name }}</span>
            <span>{{ row.senderAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人姓名" width="80" />
        <el-table-column prop="receiverPhone" label="收件人电话" width="140" />
        <el-table-column label="收件人地址" width="140">
          <template v-slot="{row}">
            <span>{{ row.receiverProvince.name }}</span>
            <span>{{ row.receiverCity.name }}</span>
            <span>{{ row.receiverCounty.name }}</span>
            <span>{{ row.receiverAddress }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updated" label="取件类型" width="80">
          <template slot-scope="{row}">
            <span v-if="row.pickupType === 1">网点自寄</span>
            <span v-else>上门取件</span>
          </template>
        </el-table-column>
        <el-table-column prop="updated" label="付费类型" width="80">
          <template slot-scope="{row}">
            <span v-if="row.paymentMethod === 1">预付</span>
            <span v-else-if="row.paymentMethod === 2">到付</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column prop="updated" label="付费状态" width="80">
          <template slot-scope="{row}">
            <span v-if="row.paymentStatus === 1">未付</span>
            <span v-else-if="row.paymentStatus === 2">到付</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template>
            <el-button type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-row type="flex" style="height:60px" align="middle" justify="center">
        <!-- 放置分页组件 -->
        <el-pagination
          layout=" total, sizes, prev, pager, next, jumper"
          :total="counts"
          :current-page="page"
          :page-sizes="[10,15,20,30]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="hCurrentChange"
        />
      </el-row>
    </div>
    <!-- 表格数据结尾 -->
  </div>
</template>

<script>
import { getTree } from '@/api/essentialData'
import { getOrder } from '@/api/professionalWork'
export default {
  data() {
    return {
      defasname: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defas: [],
      // table数据
      list: [],
      // 分页用的数据
      counts: 0,
      pages: 0,
      page: 1,
      pageSize: 10,
      status: null,
      // 表单数据
      formData: {
        user: '',
        region: '',
        status: '',
        loadingStatus: '',
        startAgency: {
          name: ''
        },
        endAgency: {
          name: ''
        }
      }
    }
  },
  created() {
    this.getOrder()
    this.getTree()
  },
  methods: {
    // 获取机构
    async getTree() {
      const res = await getTree()
      this.defas = JSON.parse(res.data.data)
      // console.log(this.defas)
    },
    handleNodeClick(data, node) {
      this.formData.startAgency.name = data.name
    },
    // 改变每页显示数量
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.getOrder()
    },
    // 分页点击切换
    hCurrentChange(page) {
      this.page = page
      this.getOrder()
    },
    // 获取数据
    async getOrder() {
      const res = await getOrder({
        page: this.page,
        pageSize: this.pageSize
      })
      console.log('获取运输任务分页数据', res)
      this.list = res.data.data.items
      this.counts = +res.data.data.counts
    },
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  margin: 25px 20px 0 20px ;
  height: 200px;
  background-color: #fff;
  padding-top: 20px;
  .el-form--inline .el-form-item{
    margin-left: 30px;
    width: 30%;
    .el-input__inner{
      width: 410px;
    }
  }
}
.form-navbar{
    margin: 20px 20px 0 20px ;
    display: flex;
    background-color: #fff;
    height: 50px;
    line-height: 50px;
    .tab-item{
    cursor:pointer;
    width: 120px;
    text-align: center;
    color: #333;
    font-size: 14px;
    }
    .active {
    background-color: #ffeeeb;
    color: #e15536;
  }
}
.form-table{
  margin: 20px 20px 0 20px ;
  padding: 30px;
  background-color: #fff;
}

</style>
